import React from 'react';
import './Index.scss';
import { useState } from 'react';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { Layout, Breadcrumb } from 'antd';
import { Outlet } from 'react-router-dom';
import IndexMenu from '../../components/content/index/IndexMenu';
import IndexHeader from '../../components/content/index/IndexHeader';
const { Header, Sider, Content } = Layout;
export default function Index() {
  const [collapsed, setCollapsed] = useState(false);
  const [breadPath1, setBreadPath1] = useState(''); // 面包屑1 二级路由
  const [breadPath2, setBreadPath2] = useState(''); // 面包屑2 三级路由
  const getPath = (key, data) => {
    const arr = data.filter((item) => key.key.includes(item.key));
    setBreadPath1(arr[0].label);
    setBreadPath2('');
    if (arr[0].children) {
      const arr1 = arr[0].children.filter((item) => key.key.includes(item.key));
      setBreadPath2(arr1[0].label);
    }
  };
  return (
    <div className="index-container">
      <Layout>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className="logo" />
          {/* 左侧菜单 */}
          <IndexMenu getPath={getPath} collapsed={collapsed} />
        </Sider>
        <Layout className="site-layout">
          <Header className="index-header">
            <div className="hr-left">
              {React.createElement(
                collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
                {
                  className: 'trigger',
                  onClick: () => setCollapsed(!collapsed),
                }
              )}
              <Breadcrumb className="bread">
                {/* 一级 */}
                <Breadcrumb.Item>
                  <a href="###">首页</a>
                </Breadcrumb.Item>
                {/* 二级 */}
                {breadPath1 ? (
                  <Breadcrumb.Item>{breadPath1}</Breadcrumb.Item>
                ) : (
                  ''
                )}
                {/* 三级 */}
                {breadPath2 ? (
                  <Breadcrumb.Item>{breadPath2}</Breadcrumb.Item>
                ) : (
                  ''
                )}
              </Breadcrumb>
            </div>
            {/* 头部 */}
            <IndexHeader />
          </Header>
          <Content className="index-content">
            {/* 数据展示 */}
            <Outlet />
            {/* 数据展示 */}
          </Content>
        </Layout>
      </Layout>
    </div>
  );
}
